<div class="nr-card-box invisible container-fluid p-4">
    <div class="row">
        <div class="col-xxl-2 col-lg-3 col-md-4">
            <sl-button class="nr-btn-format mb-3 w-100" variant="warning" title="Shift+Alt+F 快捷格式化">格式化</sl-button>
            <sl-select class="nr-se-language mb-3" label="语言" value="sql">
                <sl-menu-item value="sql">SQL</sl-menu-item>
                <sl-menu-item value="redshift">AWS Redshift</sl-menu-item>
                <sl-menu-item value="bigquery">BigQuery</sl-menu-item>
                <sl-menu-item value="db2">DB2</sl-menu-item>
                <sl-menu-item value="hive">Hive</sl-menu-item>
                <sl-menu-item value="mariadb">MariaDB</sl-menu-item>
                <sl-menu-item value="mysql">MySQL</sl-menu-item>
                <sl-menu-item value="n1ql">N1QL</sl-menu-item>
                <sl-menu-item value="plsql">PL/SQL</sl-menu-item>
                <sl-menu-item value="postgresql">PostgreSQL</sl-menu-item>
                <sl-menu-item value="spark">Spark</sl-menu-item>
                <sl-menu-item value="sqlite">SQLite</sl-menu-item>
                <sl-menu-item value="tsql">Transact-SQL</sl-menu-item>
                <sl-menu-item value="trino">Trino</sl-menu-item>
            </sl-select>
            <sl-select class="nr-se-uppercase mb-3" label="大小写" value="preserve">
                <sl-menu-item value="preserve">不处理</sl-menu-item>
                <sl-menu-item value="upper">大写</sl-menu-item>
                <sl-menu-item value="lower">小写</sl-menu-item>
            </sl-select>
            <sl-select class="nr-se-indentation mb-3" label="缩进模式" value="standard">
                <sl-menu-item value="standard">默认（标准）</sl-menu-item>
                <sl-menu-item value="tabularLeft">靠左</sl-menu-item>
                <sl-menu-item value="tabularRight">靠右</sl-menu-item>
            </sl-select>
            <sl-details class="mb-3" summary="More" open>
                <sl-button target="_blank" variant="text" href="https://sqlformat.darold.net">pgFormatter</sl-button>
                <sl-button target="_blank" variant="text" href="http://sql-format.com">Devart For SQLServer</sl-button>
                <sl-button target="_blank" variant="text" href="https://www.red-gate.com/website/sql-formatter">Reg-Data For SQLServer</sl-button>
            </sl-details>
        </div>
        <div class="col-xxl-10 col-lg-9 col-md-8">
            <div class="nr-editor"></div>
        </div>
    </div>
</div>

@Html.Raw(Netnr.QuoteTo.Html("sql-formatter.js,monaco-editor"))